<script lang="ts" setup>
interface IProps {
    pagination: { page: number, total: number, pageSize: number }
}

const props = defineProps<IProps>()
// 调用从父组件继承的事件
const emits = defineEmits<{ (e: 'change', page: number): void }>()
const _pageSize = props.pagination.pageSize

// 页面切换
const go = (page: number) => {
    emits('change', page)
}

// 首页、第一页是否可点击
const isStart = computed(() => {
    return props.pagination.page === 1
})
// 尾页、下一下是否可点击
const isEnd = computed(() => {
    return props.pagination.page === Math.ceil(props.pagination.total / props.pagination.pageSize)
})
</script>

<template>
    <div class="pagination">
        <span mr-30px @click="go(1)" :class="{ disable: isStart }">首页</span>
        <span mr-40px @click="go(pagination.page - 1)" :class="{ disable: isStart }">上一页</span>
        <a-pagination size="small" show-less-items :show-size-changer="false" :show-quick-jumper="false"
                      :total="pagination.total" v-model:current="pagination.page" @change="$emit('change', $event)"
                      :page-size="_pageSize"/>
        <span ml-20px @click="go(pagination.page + 1)" :class="{ disable: isEnd }">下一页</span>
        <span ml-30px @click="go(Math.ceil(pagination.total / pagination.pageSize))" :class="{ disable: isEnd }">
      尾页
    </span>
    </div>
</template>

<style lang="less" scoped>
.pagination {
    display: flex;
    margin-top: 20px;
    align-items: center;
    justify-content: center;

    span {
        font-size: 16px;
        color: #555555;
        cursor: pointer;

        &.disable {
            opacity: 0.3;
            cursor: not-allowed;
            pointer-events: none;
        }
    }

    :deep(.ant-pagination) {
        display: flex;
        justify-content: center;

        .ant-pagination-item {
            border: none;
            background-color: #f2f2f2;
            margin-right: 20px;

            a {
                padding: 0;
                height: auto;
                font-size: 14px;
                color: #555555;
            }

            &.ant-pagination-item-active {
                background-color: #4d555d;

                a {
                    color: white;
                }
            }
        }

        // 隐藏原有的切换页面按钮
        .ant-pagination-prev {
            display: none;
            cursor: default;
        }

        .ant-pagination-next {
            display: none;
            cursor: default;
        }
    }
}
</style>
